import React, { useEffect, useState } from 'react';
import { Input, Button, Table, TablePaginationConfig, Modal, Form, Select, notification, Upload } from 'antd';
import type { ColumnsType } from 'antd/es/table'
import '../../../styles/inventory.scss'
import '../../../font_icon/iconfont.css'
import DepositListtop1 from './InventorySearch/DepositListtop1'
// import axios from 'axios';
// 导入日期选择组件
import { DatePicker, Space } from 'antd';
import { Inventory_list, Inventory_del, Inventory_edit, Inventory_add, Inventory_search, Inventory_find } from '../../../utils/api/index';
import { useNavigate } from 'react-router-dom';

const { RangePicker } = DatePicker;


const { Search } = Input;
//*获取表单实例
var { useForm } = Form
// 用interface声明对象类型
interface Props {
    changedepositlist: any,
    handlenchange2: any

}

//定义每一行的数据对象类型
interface DataType {
    num: string;
    name: string;
    store: string;
    inventorytype: string;
    datastarttime: string;
    dataendtime: string;
    type: string

}
function Inventory(props: Props) {

    //引入生命周期
    var [inventory, setInventory] = useState([]);
    useEffect(() => {
        Inventory_list().then((res) => {
            console.log(res.data);
            setInventory(res.data)

        })
    }, [])

    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title: '盘点单号', //表格列的名字(显示在表格头上)
            dataIndex: 'num', //数据对应的属性名
            key: 'num' //key是必须的,每一列不同.
        },
        {
            title: '盘点人员',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '盘点仓库',
            dataIndex: 'store',
            key: 'store'
        },
        {
            title: '盘点类型',
            dataIndex: 'inventorytype',
            key: 'inventorytype'
        },
        {
            title: '盘点开始时间',
            dataIndex: 'datastarttime',
            key: 'datastarttime'
        },
        {
            title: '盘点结束时间',
            dataIndex: 'dataendtime',
            key: 'dataendtime'
        },
        {
            title: "盘点状态",
            dataIndex: 'type',
            key: 'type'
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>

                    {

                        <span className='iconfont icon-bianji bj' onClick={() => handleClickEdit(record)} ></span>

                    }
                    {
                        <span className='iconfont icon-shanchu shanchu' onClick={() => handleClickDel(record)} ></span >
                    }
                    {
                        <span className='iconfont  xiangq' onClick={() => handleClickEdit1(record)} >详情</span>
                    }


                </>
            ),
        },
    ];




    //分页器
    var [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 5, total: 50 })
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    var [customlist, setCustomlist] = useState([])
    var [loading, setLoading] = useState(false);
    // =====================================================================
    //搜索
    var [data, setData] = useState('')
    var navigate = useNavigate();
    const onSearch = (value: string) => {
        // console.log(value)

        // Inventory_search({ searchKey: value, page: 1, count: 10 }).then((res) => {
        //     console.log(res.data);
        //     // notification.success({ message: '搜索成功!' });

        //     setCustomlist(res.data)
        // })


    };
    // 搜索
    const changedepositlist = (data: []) => {
        console.log(data);
        Inventory_search({ name: data }).then((res) => {
            console.log(res.data);
            setInventory(res.data)

        })
        // setDepositlist(data)
    }


    //引入生命周期
    useEffect(() => {
        //请求客户列表
        Inventory_search({ searchKey: '', page: 1, count: 10 }).then((res) => {
            setCustomlist(res.data.list)//保存客户列表
            setPagination({ current: 1, pageSize: 5, total: res.data.total }) //保存总数
        })
    }, [])


    //分页
    const handleChange = (pagination: TablePaginationConfig) => {
        setPagination(pagination)//更新页码  //pagination 参数 包含有当前最新页码

        setLoading(true)
        // 在这里发请求, 获取最新页码对应的数据
        Inventory_search({ searchKey: '', page: pagination.current, count: 10 }).then((res) => {
            setLoading(false);
            setCustomlist(res.data);//保存客户列表
        })
    }
    // =====================================================================
    //选择发生改变的回调
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //上传状态发生改变回调
    var handleUploadChange = (res: any) => {
        if (res.file.status == 'done' && res.file.response.code == 200) { //上传成功
            notification.success({ message: '上传成功!' });
        }
    }
    //======================================== 新增盘点信息======================================== 
    //新增盘点信息
    const [open, setOpen] = useState(false);
    const showModal = () => {
        setOpen(true);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        onSearch('')
        setOpen(false);
    };
    //
    var navigate = useNavigate()
    //表单验证通过,执行
    const onFinish = (values: any) => {
        //发起 新增请求
        Inventory_add(values).then((res) => {
            console.log(res.data);
            notification.success({ message: '新增成功' });
            navigate('/index/home/inventory');

        })
    };
    //======================================== 删除单个盘点信息======================================== 
    // 删除单个盘点信息
    var handleClickDel = (record: any) => {
        console.log(record);
        Inventory_del({ id: record._id, searchKey: record.name, page: pagination.current, count: 1 }).then((res) => {
            console.log(res.data.list);
            notification.success({ message: '删除成功' });
            handleChange(pagination);

        })

    }

    //======================================== 修改盘点信息======================================== 
    //*编辑
    var [isbianji, setisBianji] = useState(false)
    // 编辑单个信息
    var handleClickEdit = (record: any) => {

        console.log(record);
        record = JSON.parse(JSON.stringify(record))
        setisBianji(true)
        // record.role = record.id
        console.log(record);

        form.setFieldsValue(record)

    }
    //*编辑隐藏弹出框
    var handlebianji = () => {
        setisBianji(false)
    }
    //*获取form 实例 
    var [form] = useForm()
    //*更改请求
    var onBianji = (record: any) => {
        handlebianji();
        console.log(record);
        Inventory_edit(record).then((ok) => {
            Inventory_list().then((res) => {
                console.log(res.data);
                setInventory(res.data)

            })

            notification.success({ message: ["修改成功"] })
            // navigate('/index/home/inventory')



        })
    }
    //======================================== 查看盘点信息详情======================================== 
    //*编辑
    var [isbianji1, setisBianji1] = useState(false)
    // 编辑单个信息
    var handleClickEdit1 = (record: any) => {

        console.log(record);
        record = JSON.parse(JSON.stringify(record))
        setisBianji1(true)
        // record.role = record.id
        console.log(record);

        form.setFieldsValue(record)
    }
    //*编辑隐藏弹出框
    var handlebianji1 = () => {
        setisBianji1(false)
    }
    //*获取form 实例 
    var [form] = useForm()
    //*更改请求
    var onBianji1 = (record: any) => {
        console.log(record);
        Inventory_search(record).then((ok) => {
            Inventory_list().then((res) => {
                console.log(res.data);
                setInventory(res.data)

            })
            notification.success({ message: ["修改成功"] })
            // navigate('/index/home/inventory')
            setisBianji1(false)


        })
    }
    return (
        <div className='inventory'>
            <div className="opet">
                {/* <Search style={{ width: 300, marginRight: 20 }} placeholder="输入客户姓名" onSearch={onSearch} enterButton />
                <Button type="primary" >新增客服</Button> */}
            </div>
            <div className="opet2">
                <div className="left">

                    <DepositListtop1 changedepositlist={changedepositlist} />
                </div>
                <div className='right'>
                    {/* accept 接受上传的文件类型 */}
                    {/* action 上传的地址 */}
                    {/* name 发到后台的文件参数名 */}
                    {/* onChange 上传文件状态发生改变时的回调 */}
                    {/* showUploadList 是否展示文件列表 */}
                    <Button type="primary" onClick={showModal} className='chuangjian'>创建</Button>
                    <Upload accept=".xls,.xlsx" action="/Inventory" name="excel" onChange={handleUploadChange} showUploadList={false}>
                        <Button type='primary'>导入</Button>
                    </Upload>
                    <Button type='primary' href="/Inventory">导出</Button>
                </div>
            </div>

            {/* 表格组件 */}
            {/* columns 表格每一列如何渲染 */}
            {/* dataSource 表格的数据源 */}
            {/* pagination 分页 */}
            {/* onChange 分页的回调 */}
            {/* rowSelection 表格行的选择 */}
            <Table
                loading={loading}
                size='middle'
                rowSelection={rowSelection}
                columns={columns}
                dataSource={inventory}
                pagination={pagination}
                onChange={handleChange}

            />
            {/* //======================================== 新增盘点信息========================================  */}

            <Modal
                title="新增人员"
                open={open}
                onCancel={handleCancel}
                footer=''

            >
                <div >
                    <Form
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="盘点单号"
                            name="num"
                            rules={[{ required: true, message: '请输入盘点单号' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点人员"
                            name="name"
                            rules={[{ required: true, message: '请输入盘点人员' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点仓库"
                            name="store"
                            rules={[{ required: true, message: '请输入仓库' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点类型"
                            name="inventorytype"
                            rules={[{ required: true, message: '请输入盘点类型' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点开始时间"
                            name="datastarttime"
                            rules={[{ required: true, message: '开始时间' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点结束时间"
                            name="dataendtime"
                            rules={[{ required: true, message: '结束时间' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="盘点状态"
                            name="type"
                            rules={[{ required: true, message: '请选择状态' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button onClick={handleCancel}>取消</Button>
                            <Button type="primary" htmlType="submit" onClick={handleCancel}>确定</Button>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>

            {/* //======================================== 编辑单个信息========================================  */}
            <div className="binaji">
                <Modal title="编辑" open={isbianji} closable={false} footer={[<Button onClick={() => { handlebianji() }} >取消</Button>]} >
                    <Form
                        form={form}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={onBianji}
                    >
                        <Form.Item
                            label="盘点单号"
                            name="num"
                            rules={[{ required: true, message: '请输入盘点单号' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点人员"
                            name="name"
                            rules={[{ required: true, message: '请输入盘点人员' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点仓库"
                            name="store"
                            rules={[{ required: true, message: '请输入仓库' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点类型"
                            name="inventorytype"
                            rules={[{ required: true, message: '请输入盘点类型' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点开始时间"
                            name="datastarttime"
                            rules={[{ required: true, message: '开始时间' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点结束时间"
                            name="dataendtime"
                            rules={[{ required: true, message: '结束时间' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="盘点状态"
                            name="type"
                            rules={[{ required: true, message: '请选择状态' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确认编辑
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
            {/* //======================================== 查看盘点信息详情========================================  */}
            <div className="binaji">
                <Modal title="查看详情" open={isbianji1} closable={false} footer={[<Button onClick={() => { handlebianji1() }} >取消</Button>]} >
                    <Form
                        form={form}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={onBianji1}
                    >
                        <Form.Item
                            label="盘点单号"
                            name="num"
                            rules={[{ required: true, message: '请输入盘点单号' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点人员"
                            name="name"
                            rules={[{ required: true, message: '请输入盘点人员' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点仓库"
                            name="store"
                            rules={[{ required: true, message: '请输入仓库' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点类型"
                            name="inventorytype"
                            rules={[{ required: true, message: '请输入盘点类型' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点开始时间"
                            name="datastarttime"
                            rules={[{ required: true, message: '开始时间' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="盘点结束时间"
                            name="dataendtime"
                            rules={[{ required: true, message: '结束时间' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="盘点状态"
                            name="type"
                            rules={[{ required: true, message: '请选择状态' }]}
                        >
                            <Input />
                        </Form.Item>
                        {/* 
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确认编辑
                            </Button>
                        </Form.Item> */}
                    </Form>
                </Modal>
            </div>


        </div>


    );
}

export default Inventory;